<template>
    <div class="app-container">

        <h3>{{props.subjectName}}-列表</h3>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button v-hasPermi="['app:course:add']" type="primary" plain icon="Plus" @click="addOrUpdateHandle(0,0,'')">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
            </el-col>
        </el-row>

        <el-table v-if="refreshTable" :data="state.rows" row-key="id" :default-expand-all="isExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="name" label="课程名称" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
            <el-table-column prop="total" label="内容总量" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                    <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button v-hasPermi="['app:course:edit']" @click="addOrUpdateHandle(scope.row.id)" circle type="primary" icon="Edit" />
                    <el-button v-if="scope.row.ancestors=='0'" @click="addOrUpdateHandle(0,scope.row.id,scope.row.name)" v-hasPermi="['app:course:add']" circle type="success"
                        icon="Plus" />
                    <el-button v-hasPermi="['app:course:remove']" @click="deleteHandle(scope.row.id)" circle type="danger" icon="Delete" />
                </template>
            </el-table-column>
        </el-table>
        <!-- 引用新增或修改的界面 -->
        <addAndEdit :subjectId="props.subjectId" ref="addOrUpdateRef" @refreshDataList="getDataList"></addAndEdit>
    </div>
</template>

<script lang="ts" setup>
 import { getCurrentInstance, ComponentInternalInstance, ref, reactive, toRef, nextTick,watch } from 'vue';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  import { IHooksOptions } from '@/hooks/hooksinterface'
  import { useCrud } from '@/hooks/hooksservice'
   import {dataApi,deleteCourse} from '@/api/app/course/course'
   import addAndEdit from './add-and-edit.vue';
import { pid } from 'process';
   const props = defineProps(['subjectId','subjectName'])
   //得到代理的时时值
   const sid=toRef(props, 'subjectId')
  
   // 可以直接侦听一个 ref
    watch(sid, async (newValue, oldValue) => {
        if(newValue){
            state.queryParams.subjectId=newValue
            getDataList()
        }
    })

 const isExpandAll = ref(false);
const refreshTable = ref(true);

const {  sys_normal_disable } = proxy!.useDict(  'sys_normal_disable');


const state : IHooksOptions = reactive({
        queryApi: dataApi,
        deleteApi: deleteCourse,
        primaryKey: 'id', 
        isPage:false, 
        queryParams: { 
            subjectId: sid.value
        }
    })

    const { getDataList, selectionChangeHandle, resetQuery, query, deleteBatchHandle, deleteHandle } = useCrud(state)
 /** 展开/折叠操作 */
 function toggleExpandAll() {
        refreshTable.value = false;
        isExpandAll.value = !isExpandAll.value;
        nextTick(() => {
            refreshTable.value = true;
        });
    }
 // 调用新增或修改页面的方法
const addOrUpdateRef = ref()
//新增或修改的时候传递id
const addOrUpdateHandle = (id?: number,pid?:number,pName?:string) => {
    //调用它里面的init方法
	addOrUpdateRef.value.init(id,pid,pName)
}

</script>

<style>
</style>
